"use client";

import React, { useState } from "react";
import { Layout, Button, Typography, Affix } from "antd";
import { type FC, type ReactNode } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined, BookOutlined } from "@ant-design/icons";

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

interface PreviewLayoutProps {
  navigation: ReactNode;
  content: ReactNode;
  title?: string;
}

const PreviewLayout: FC<PreviewLayoutProps> = ({ navigation, content, title }) => {
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  return (
    <Layout className="h-full">
      <Affix>
        <Header className="flex items-center px-4 bg-white border-b border-gray-200 h-16 shadow-sm">
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={toggleCollapsed}
            className="mr-4"
          />
          <BookOutlined className="text-blue-500 text-xl mr-3" />
          <Title level={4} className="m-0 flex-1 truncate">
            {title || "课程预览"}
          </Title>
        </Header>
      </Affix>
      
      <Layout className="bg-white">
        <Sider
          width={280}
          collapsible
          collapsed={collapsed}
          trigger={null}
          collapsedWidth={0}
          className="bg-white border-r border-gray-200 overflow-auto"
          style={{ height: "calc(100vh - 64px)" }}
        >
          <div className="p-2 h-full">{navigation}</div>
        </Sider>
        
        <Content className="p-6 bg-white">
          {content}
        </Content>
      </Layout>
    </Layout>
  );
};

export default PreviewLayout;
